import { Claude, DeepSeek, OpenAI, Qwen } from "@lobehub/icons";
import { Select } from "antd";


interface SelectModelProps {
    model: string;
    onSelect: (model: string) => void;
    style?: React.CSSProperties;
}

const SelectModel: React.FC<SelectModelProps> = ({ model, onSelect, style }) => {
    const models = [
        {
            label: 'gpt-4o',
            id: 'gpt-4o',
            icon: <OpenAI />
        },
        {
            label: 'gpt-4',
            id: 'gpt-4',
            icon: <OpenAI />
        },
        {
            label: 'moonshot-v1-128k',
            id: 'moonshot-v1-128k',
            icon: <OpenAI />
        },
        {
            label: 'o3-mini',
            id: 'o3-mini',
            icon: <OpenAI />
        },
        {
            label: 'gpt-4o-mini',
            id: 'gpt-4o-mini',
            icon: <OpenAI />
        },
        {
            label: 'Qwen2.5-72B-Instruct',
            id: 'Qwen2.5-72B-Instruct',
            icon: <Qwen />
        },
        {
            label: 'deepseek-chat',
            id: 'deepseek-chat',
            icon: <DeepSeek />
        },
        {
            label: 'claude-3-7-sonnet',
            id: 'claude-3-7-sonnet',
            icon: <Claude />
        },
        {
            label: 'claude-3-haiku-20240307',
            id: 'claude-3-haiku-20240307',
            icon: <Claude />
        },
        {
            label: 'claude-3-5-sonnet-20241022',
            id: 'claude-3-5-sonnet-20241022',
            icon: <Claude />
        }
    ]

    return (
        <Select
            value={model}
            style={style}
            onChange={(value) => onSelect(value)}
        >
            {models.map((item) => (
                <Select.Option key={item.id} value={item.id}>
                    {item.icon} {item.label}
                </Select.Option>
            ))}
        </Select>
    );
};

export default SelectModel;